<script lang="ts" setup>
import BaseButton from "@/components/BaseButton/index.vue";
import BaseUpDown from "@/components/BaseUpDown/index.vue";
import useSearch from "@/hooks/useSearch";
import useData from "./hooks/useData";
import { useUserStore } from "@/stores/modules/user";
import { formatDate } from "@/utils";
import ChartAttack from "./components/ChartAttack/index.vue";
import BlockDetails from "./components/BlockDetails/index.vue";

const { pageData, agrMap } = useData();
import { warnAction, getDataByPage, plugAction, warnAddBatch } from "@/api/modules/threat/index";
import UpdateForm from "./components/UpdateForm/index.vue";
import BlockWarn from "./components/BlockWarn/index.vue";

const userStore = useUserStore();
const username = computed(() => userStore.userInfo.name);
const { tableData, loadData, formData, reloadData } = useSearch({
  defaultData: {
    ipproto: "0"
  },
  responseKey: {
    list: "result.data",
    total: "result.total"
  }
});

async function loadDataCb() {
  await warnAddBatch();
  loadData({
    api: getDataByPage,
    sendData: {
      pageNum: formData.pageNum - 1,
      pageSize: formData.pageSize,
      start_time: parseInt(new Date(formData.start_time).getTime() / 1000) || " ",
      end_time: parseInt(new Date(formData.end_time).getTime() / 1000) || " ",
      ip: formData.ip,
      threaten_id: formData.threaten_id
    }
  });
}

loadDataCb();

function reloadDataCb() {
  reloadData();
  loadData({
    api: getDataByPage,
    sendData: {
      pageNum: formData.pageNum - 1,
      pageSize: formData.pageSize,
      start_time: parseInt(new Date(formData.start_time).getTime() / 1000) || "0",
      end_time: parseInt(new Date(formData.end_time).getTime() / 1000) || "0",
      ip: formData.ip,
      threaten_id: formData.threaten_id
    }
  });
}

loadDataCb();

/**删除*/
import useDelete from "@/hooks/useDelete";
import { computed } from "vue";
import BaseCollapse from "@/components/BaseCollapse/index.vue";
import SelectThreatInput from "@/components/SelectThreatInput/index.vue";
import DateRange from "@/components/DateRange/index.vue";
import { ElMessage, ElMessageBox } from "element-plus";

const { deleteHandler, idList } = useDelete();

async function deleteCb(id) {
  await deleteHandler({
    api: warnAction,
    multiple: false,
    sendData: {
      id: [id]
    },
    hideMessageBox: false
  });
  loadDataCb();
}

function selectCb(data) {
  console.log(data);
  idList.value = data.rowList.map(item => item.userId);
}

// 解封
async function unblock(sip) {
  await ElMessageBox.confirm("确认解封已选中的数据项?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  });
  await plugAction({
    sip,
    action: 1,
    desc: ""
  });
  loadDataCb();
  ElMessage({
    type: "success",
    message: "操作成功"
  });
}
</script>

<template>
  <BaseUpDown>
    <template #up>
      <BaseCollapse title="威胁管控">
        <template #header>
          <div style="width: 200px; float: right" class="h-box justify-end" @click.stop>
            <BlockWarn :type="3" @success="loadDataCb" title="人工封堵">
              <BaseButton type="artificial_block_icon_text" />
            </BlockWarn>
          </div>
        </template>
        <ChartAttack />
        <el-form class="mg-t-lg h-box">
          <div class="h-box" @click.prevent style="flex-wrap: wrap; height: 50px">
            <el-form-item class="mg-l-sm" label="IP">
              <el-input v-model="formData.ip" placeholder="请输入" style="width: 120px" />
            </el-form-item>
            <el-form-item class="mg-l-lg" label-width="72px" label="攻击时间">
              <DateRange v-model:start="formData.start_time" v-model:end="formData.end_time" />
            </el-form-item>
            <BaseButton class="mg-l-sm" style="margin-bottom: 18px" @click="loadDataCb()" type="search_icon_text" />
            <BaseButton class="mg-l-sm" style="margin-bottom: 18px" @click="reloadDataCb()" type="reset_icon_text" />
          </div>
        </el-form>
      </BaseCollapse>
    </template>
    <he-table
      @handle-current-change="loadDataCb"
      :total="tableData.total"
      v-model:page-size="formData.pageSize"
      v-model:page-num="formData.pageNum"
      operate-width="180px"
      :operate-list="[]"
      :table-data="tableData.list"
      :column-data="pageData.columnData"
      :show-multiple="false"
      :show-summary="false"
      :show-operate="false"
      :show-multiple-column="false"
      :show-pagination="true"
      @select="selectCb"
    >
      <template #9Default="{ data }">
        {{ data.row[8] == 1 ? formatDate(Number(data.row[9]) * 1000) : "-" }}
      </template>
      <template #5Default="{ data }">
        {{ data.row[2] == "00:00:00:00:00:00" ? "-" : (data.row[5] === "未知" ? "扫描攻击" : data.row[5]) }}
      </template>
      <template #4Default="{ data }">
        {{ data.row[2] == "00:00:00:00:00:00" ? "0" : data.row[4] }}
      </template>
      <template #7Default="{ data }">
        {{ data.row[2] == "00:00:00:00:00:00" ? "-" : data.row[7] }}
      </template>
      <template #8Default="{ data }">
        {{ data.row[8] == 1 ? "已封堵" : "未封堵" }}
      </template>
      <template #10Default="{ data }">
        <span v-if="data.row[10] == 1">串联封堵</span>
<!--        <span v-if="data.row[10] == 2">交换机封堵</span>-->
        <span v-if="data.row[10] == 3">第三方封堵</span>
      </template>
      <template #operationDefault="{ data }">
        <BlockWarn
          @success="loadDataCb"
          :row-data="{
            sip: data.row[3],
            isBlock:data.row[8] == 1
          }"
          :type="2"
          title="删除"
        >
          <base-button type="del_text"></base-button>
        </BlockWarn>

        <BlockWarn
          v-if="data.row[8] == 0"
          @success="loadDataCb"
          :row-data="{
            sip: data.row[3]
          }"
        >
          <BaseButton type="block_icon_text" />
        </BlockWarn>
        <BaseButton  @click="unblock(data.row[3])" v-else type="unblock_icon_text" />
        <BlockDetails
          :row-data="{
            sip: data.row[3]
          }"
        >
          <BaseButton class="mg-l-sm" type="detail_icon_text" />
        </BlockDetails>
      </template>
    </he-table>
  </BaseUpDown>
</template>
